<template>
    <div class="achievementDetail">

        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/achievementMonth' }">业绩激励</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button v-for="(item,index) in devList" :key="index" :type="index ===currentTable? 'primary': ''" @click="changeDev(item, index)">
            {{item.devName}}
        </el-button>
        <h3>{{currentMonth.split("-").join("年")}}月份合生项目营收业绩佣金分配明细表</h3>
        <div>
            受益人姓名：
            <el-input class="w100 mr20" v-model="staffName" size="mini" placeholder="请输入姓名"></el-input>
            <el-button type="primary" size="mini" @click="getReMonthDetailList(2)" id="monitorEnter">查询</el-button>
            <el-button type="primary" size="mini" @click="exportReMonthDetail">导出</el-button>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    align="center"
                    class="mt20"
                    :span-method="objectSpanMethod"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="serialNum"
                        align="center"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        align="center"
                        label="部门">
                    <template slot-scope="scope">{{scope.row.departmentName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        prop="staffName"
                        align="center"
                        label="受益人姓名">
                    <template slot-scope="scope">{{scope.row.staffName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        prop="stationName"
                        align="center"
                        label="工作岗位">
                    <template slot-scope="scope">{{scope.row.stationName || "——"}}</template>
                </el-table-column>
                <el-table-column
                        prop="departmentProportion"
                        align="center"
                        label="部门比例">
                    <template slot-scope="scope">{{scope.row.departmentProportion}}%</template>
                </el-table-column>
                <el-table-column
                        prop="departmentAmount"
                        align="center"
                        label="部门分配佣金金额(元)">
                </el-table-column>
                <el-table-column
                        prop="standardWeight"
                        align="center"
                        label="岗位标准权重">
                </el-table-column>
                <el-table-column
                        align="center"
                        
                        label="岗位工作量权重浮动">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" size="mini" v-model="scope.row.floatWeight" @input="replaceWeight(scope, 'floatWeight')" @blur="blurUpdate(scope.row, 'input1')"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <!-- v-if="isShowUpdate" -->
                <el-table-column
                        align="center"
                        label="特殊原因权重调整">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" size="mini" v-model="scope.row.specialWeight" @input="replaceWeight(scope, 'specialWeight')" @blur="blurUpdate(scope.row, 'input2')"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="overallWeight"
                        align="center"
                        label="岗位综合权重">
                </el-table-column>
                <el-table-column
                        prop="revenueAmount"
                        align="center"
                        label="岗位营收业绩佣金(元)">
                </el-table-column>
            </el-table>
            <div class="mt20 view-more" @click="getReMonthDetailList(null)" v-if="viewMore">
                查看更多<i class="el-icon-arrow-down"></i>
            </div>
        </div>
        <!--<el-dialog
                title="调整权重"
                :visible.sync="dialogVisible"
                width="90%">
            <el-table
                    :data="singleTableData"
                    class="mt20"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="serialNum"
                        align="center"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        align="center"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="staffName"
                        align="center"
                        label="受益人姓名">
                </el-table-column>
                <el-table-column
                        prop="stationName"
                        align="center"
                        label="工作岗位">
                </el-table-column>
                <el-table-column
                        prop="departmentProportion"
                        align="center"
                        label="部门比例">
                </el-table-column>
                <el-table-column
                        prop="departmentAmount"
                        align="center"
                        label="部门分配佣金金额(元)">
                </el-table-column>
                <el-table-column
                        prop="standardWeight"
                        align="center"
                        label="岗位标准权重">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="岗位工作量权重浮动">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.floatWeight" @input="replaceWeight(scope.row.floatWeight, 'floatWeight')" ref="input1"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        label="特殊原因权重调整">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.specialWeight" @input="replaceWeight(scope.row.specialWeight, 'specialWeight')" ref="input2"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="overallWeight"
                        label="岗位综合权重(元)">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="revenueAmount"
                        label="岗位营收业绩佣金(元)">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="adjustment()">确定调整</el-button>
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>-->
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'

    export default {
        name: 'achievementMonthDetail',
        data() {
            return {
                currentTable: 0,
                reportAllotMonthId: 0,
                developerId: 0,
                devList: [],
                staffName: "",
                tableData: [],
                singleTableData: [],
                dialogVisible: false,
                viewMore: true,
                currentMonth: "",
                isShowUpdate: false,
                isDisabledUpdate: true,
                settlementMark: '',
            }
        },
        created() {
            this.currentMonth = this.$route.query.month;
            this.settlementMark = this.$route.query.settlementMark;
            this.getIsUpdateTable();
            this.developerId = this.$route.query.developerId;
            this.reportAllotMonthId = this.$route.query.id;
            let devList = window.sessionStorage.getItem("AMDEVLIST");
            this.devList = JSON.parse(devList);
            this.currentTable = this.devList.findIndex((item) => {
                return item.devId === this.$route.query.developerId
            });
            this.getReMonthDetailList(2)
        },
        mounted() {

        },
        methods: {
            changeDev(dev, index) {

                this.developerId = dev.devId;
                this.currentTable = index;
                this.getReMonthDetailList(2);
            },
            blurUpdate(row, input){
                console.log(row.floatWeight, row.specialWeight, input);
                let floatWeight = row.floatWeight;
                let specialWeight = row.specialWeight;

                if(floatWeight > 100 || specialWeight > 100){
                    this.$message({
                        message: '不能设置大于100的数值',
                        type: 'warning'
                    });
                    return false
                }
                if(floatWeight === "" || specialWeight === ""){
                    this.$message({
                        message: '岗位工作量权重浮动和特殊原因权重调整必须同时设置才能保存！',
                        type: 'warning'
                    });
                    return false
                }
                this.dialogVisible = false;
                this.axios.post(api.updateReMonthDetail, {
                    detailId: row.id,
                    floatWeight: floatWeight,
                    specialWeight: specialWeight,
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '调整成功',
                            type: 'success'
                        });
                        this.getReMonthDetailList(2)
                    }
                })

            },
            showDialog(row, input) {
                this.dialogVisible = true;
                this.singleTableData = [{...row}]
                setTimeout(() => {
                    this.$refs[input].focus();
                }, 10)
            },
            getReMonthDetailList(count) {
                this.viewMore = !!count;
                this.axios.post(api.getReMonthDetailList, {
                    reportAllotMonthId: this.reportAllotMonthId,
                    developerId: this.developerId,
                    staffName: this.staffName || null,
                    departNum: count
                }).then((res) => {
                    this.tableData = res.data.data;
                })
            },
            replaceNum(value) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                return value
            },
            replaceWeight(scope, field) {
                console.log(scope, field);

                let value = this.replaceNum(scope.row[field]);
                setTimeout(() => {
                    this.$set(this.tableData[scope.$index], field, value)
                }, 30)
            },
            adjustment() {
                if(+this.singleTableData[0].floatWeight > 100 || +this.singleTableData[0].specialWeight > 100){
                    this.$message({
                        message: '不能设置大于100的数值',
                        type: 'warning'
                    });
                    return false
                }

                if(this.singleTableData[0].floatWeight === "" || this.singleTableData[0].specialWeight === ""){
                    this.$message({
                        message: '输入不能为空，请确认后提交',
                        type: 'warning'
                    });
                    return false
                }

                this.dialogVisible = false;
                this.axios.post(api.updateReMonthDetail, {
                    detailId: this.singleTableData[0].id,
                    floatWeight: this.singleTableData[0].floatWeight,
                    specialWeight: this.singleTableData[0].specialWeight,
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '调整成功',
                            type: 'success'
                        });
                        this.getReMonthDetailList(2)
                    }
                })
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (row.mergeField && row.mergeField.indexOf(column.property) >= 0) {
                    if (row.mergeColumn && row.mergeColumn[column.property] > 0) {
                        return {
                            rowspan: row.mergeColumn[column.property],
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            exportReMonthDetail() {
                this.axios.post(api.exportReMonthDetail, {
                    reportAllotMonthId: this.reportAllotMonthId,
                    developerId: this.developerId
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            message: '已导出，请前往报表查询下载',
                            type: 'success'
                        });
                    }
                })
            },
            getIsUpdateTable() {
                const addZero = num => num < 10 ? ('0' + num) : num 
                // 本月 或者 已经结算   settlementMark === 1 情况下不可编辑
                let date = new Date();
                let fullDate = date.getFullYear() + '-' + addZero(date.getMonth() + 1)
                this.isDisabledUpdate = this.settlementMark === 1 || this.currentMonth === fullDate
                // 接口废弃，直接通过字段判断
                // this.axios.post(api.getIsUpdateTable, {
                //     month: this.currentMonth,
                //     settlementMark: this.settlementMark
                // }).then((res) => {
                //     this.isShowUpdate = !!res.data.data.showFlag
                //     this.isDisabledUpdate = !res.data.data.canAdjust
                // })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .editable {
        border: 1px solid blue;
    }

    .view-more {
        text-align: center;
        color: #3a8ee6;
        cursor: pointer;
    }
</style>
